// 试题列表
<template>
  <div class="questions-list">
    <el-table :data="allList" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="150">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column label="题型" width="120">
        <template slot-scope="scope">
          <!-- 0 单选 1 多选 2 简答 -->
          <span v-if="scope.row.questionType === '1'">单选</span>
          <span v-else-if="scope.row.questionType === '2'">多选</span>
          <span v-else>简答</span>
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="280">
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="180">
      </el-table-column>
      <el-table-column label="难度" width="80">
        <template slot-scope="scope">
          <!-- 0 简单 1 一般 2 困难 -->
          <span v-if="scope.row.difficulty === '1'">简单</span>
          <span v-else-if="scope.row.difficulty === '2'">一般</span>
          <span v-else>困难</span>
        </template>
      </el-table-column>
      <el-table-column prop="chkUser" label="录入人" width="120">
      </el-table-column>

      <el-table-column label="审核状态" width="120">
        <template slot-scope="scope">
          <!-- 0 待审核 1 通过 2 拒绝 -->
          <span v-if="scope.row.chkState === 0">待审核</span>
          <span v-else-if="scope.row.chkState === 1">已审核</span>
          <span v-else>已拒绝</span>
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="150">
      </el-table-column>
      <el-table-column prop="creator" label="审核人" width="120">
      </el-table-column>
      <el-table-column prop="publishState" label="发布状态" width="150">
        <template slot-scope="scope">
          <!--  已下架(已审核+下架)   已发布(已审核+上架)  待发布（其他） -->
          <span v-if="scope.row.chkState === 1 && scope.row.publishState === 0"
            >已下架</span
          >
          <span
            v-else-if="scope.row.chkState === 1 && scope.row.publishState !== 0"
            >已发布</span
          >
          <span v-else>待发布</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <!-- @click="handleClick(scope.row)" -->
          <el-button type="text" size="small" @click="getOptions(scope.row.id)"
            >预览</el-button
          >
          <el-button
            type="text"
            size="small"
            :class="scope.row.chkState !== 0 ? 'grey ' : ''"
            @click="checkForm = true"
            >审核</el-button
          >

          <el-button
            type="text"
            size="small"
            :class="scope.row.publishState !== 0 ? 'grey ' : ''"
          >
            修改
          </el-button>
          <el-button type="text" size="small">
            {{ scope.row.publishState === 0 ? "上架" : "下架" }}
          </el-button>
          <el-button
            type="text"
            size="small"
            :class="scope.row.publishState !== 0 ? 'grey ' : ''"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 预览弹出框 -->
    <el-dialog
      class="preview-dialog"
      title="收货地址"
      :visible.sync="previewForm"
    >
      <preview-questions :question="question" @close="previewForm = false" />
    </el-dialog>

    <!-- /预览弹出框 -->
    <!-- 审核弹出框 -->
    <el-dialog class="check-dialog" title="题目审核" :visible.sync="checkForm">
      <check-questions @close="checkForm = false" />
    </el-dialog>
    <!-- /审核弹出框 -->
  </div>
</template>

<script>
import PreviewQuestions from "./questions-preview";
import CheckQuestions from "./questions-check";
import { detail } from "@/api/hmmm/questions";
export default {
  name: "QuestionsList",
  components: {
    PreviewQuestions,
    CheckQuestions
  },
  props: {
    allList: {
      type: [Array],
      required: true
    }
  },
  data() {
    return {
      previewForm: false, // 预览弹出框
      checkForm: false, //审核弹出框
      question: "" //当前点击的列表数据
    };
  },

  methods: {
    handleClick(row) {
      console.log(row);
    },
    // previewClick(id) {
    //   this.rowId =id;
    //   this.previewForm = true;

    //   console.log(this.rowId);
    // }
    getOptions(id) {
      detail({
        id: id
      })
        .then(({ data }) => {
          console.log(data);
          this.question = data;
        })
        .catch(() => {
          this.$message.error("获取试题选项失败！", error);
        });
      this.previewForm = true;
    }
  }
};
</script>

<style scoped>
.grey {
  color: #c0c4cc;
  cursor: not-allowed;
}

::v-deep .preview-dialog > .el-dialog {
  width: 900px;
}
::v-deep .check-dialog > .el-dialog {
  width: 400px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
